<template>
  <div>
    <!--1视图-->
<!--    起始位置：<el-input id="start" v-model="startName"></el-input>-->
<!--    结束位置：<el-input id="end" v-model="endName"></el-input>-->
<!--    <el-button @click="goView">查询</el-button>-->
<!--    <div id="container"/>-->
    <input type="text" v-model="start" placeholder="起点" />
    <input type="text" v-model="end" placeholder="终点" />
    <button @click="planRoute">规划路线</button>
    <div id="my-panel" style="width: 100%; height: 500px;"></div>

  </div>

</template>

<script>
import AMap from '@amap/amap-jsapi-loader'

export default {
  name: "CityView",
  data() {
    return {
      //2属性定义
      // map: null,
      // startName: '',
      // endName: ''
      start: '',
      end: '',
      maps: null
    }
  }, mounted() {
    // window._AMapSecurityConfig = {
    //   securityJsCode:'f4d27549e10b2ca24bb8133e532ab1de'// 申请key对应的秘钥
    // }
    // // DOM初始化完成进行地图初始化
    // this.initMap()
  },


  methods: {
    // //3自定义方法
    // goView() {
    //   // eslint-disable-next-line no-undef
    //   const driving = new AMap.Driving({
    //     map: this.map,
    //     // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
    //     // eslint-disable-next-line no-undef
    //     policy: AMap.DrivingPolicy.LEAST_TIME
    //   })
    //   const points = [
    //     { keyword: this.startName, city: '全国' },
    //     { keyword: this.endName, city: '全国' }
    //   ]
    //
    //   driving.search(points, (status, result) => {
    //     // 未出错时，result即是对应的路线规划方案
    //     console.log('status=', status)
    //     console.log('result=', result)
    //   })
    // },
    // initMap() {
    //   AMapLoader.load({
    //     key: 'ee4744378fea1c3e7ab81297836d45b7', // 申请好的Web端开发者Key，首次调用 load 时必填
    //     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //     plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    //   }).then(AMap => {
    //     this.map = new AMap.Map('container', { // 设置地图容器id
    //       viewMode: '3D', // 是否为3D地图模式
    //       zoom: 5, // 初始化地图级别
    //       center: [105.602725, 37.076636] // 初始化地图中心点位置
    //     })
    //     const autoOptions = {
    //       // city 限定城市，默认全国
    //       city: '全国',
    //       input: 'start'
    //     }
    //     // 实例化AutoComplete
    //     const autoComplete = new AMap.AutoComplete(autoOptions)
    //     console.log(autoComplete);
    //     const autoOptions2 = {
    //       // city 限定城市，默认全国
    //       city: '全国',
    //       input: 'end'
    //     }
    //     // 实例化AutoComplete
    //     const autoComplete2 = new AMap.AutoComplete(autoOptions2)
    //     console.log(autoComplete2);
    //     //根据关键字进行搜索
    //      autoComplete.search(this.startName, (status, result) => {
    //       // 搜索成功时，result即是对应的匹配数据
    //       console.log("1111111"+result)
    //     })
    //   }).catch(e => {
    //     console.log(e)
    //   })
    // }
    planRoute() {
      this.maps = new AMap.load('container', {
        key: 'ee4744378fea1c3e7ab81297836d45b7',
        viewMode: '2D',  //默认使用 2D 模式
        zoom:11,  //初始化地图层级
        center: [116.397428, 39.90923] , //初始化地图中心点
        plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete']
      });
      const points = [
        { keyword: this.start,city:'全国' }, //起始点坐标
        { keyword: this.end,city:'全国' } //终点坐标
      ]
      AMap.plugin(["AMap.Driving"], function () {
        const driving = new AMap.Driving({
          map: this.maps,
          panel: "my-panel",
        });
        //获取起终点规划线路
        driving.search(points, function (status, result) {
          if (status === "complete") {
            //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
            //查询成功时，result 即为对应的驾车导航信息
            console.log(result);
          } else {
            console.log("获取驾车数据失败：" + result);
          }
        });
      });

    }

  }, created() {
    //4.钩子函数
  }
}
</script>

<style scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>